<template>
    <div class="hello" v-scroll="loadMore">
        <ul class="news">
            <li :key="index"  v-for="(news, index) in newslist">
                {{index}}-{{news}}
            </li>
        </ul>
        <p v-if="isLoading">loading...</p>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                newslist: [
                    "业果你主于", "南指有百", "表满两",
                    "往党少日即", "专即切好", "火持点",
                    "适说前", "水难不", "研图海", "命党济",
                    "积由四报", "决见当入省", "东省起安",
                    "业果你主于", "南指有百", "表满两",
                    "往党少日即", "专即切好", "火持点",
                    "适说前", "水难不", "研图海", "命党济",
                    "积由四报", "决见当入省", "东省起安",
                    "业果你主于", "南指有百", "表满两",
                    "往党少日即", "专即切好", "火持点",
                    "适说前", "水难不", "研图海", "命党济",
                    "积由四报", "决见当入省", "东省起安",
                    "业果你主于", "南指有百", "表满两",
                    "往党少日即", "专即切好", "火持点",
                    "适说前", "水难不", "研图海", "命党济",
                    "积由四报", "决见当入省", "东省起安",
                    "业果你主于", "南指有百", "表满两",
                    "往党少日即", "专即切好", "火持点",
                    "适说前", "水难不", "研图海", "命党济",
                    "积由四报", "决见当入省", "东省起安",
                ],
                isLoading: false,
            };
        },
        directives: {//v-scroll 自定义指令
            scroll: {
                inserted: function (el, binding) {//el指令所绑定元素
                    el.addEventListener('scroll', () => {
                        const containerHeight = el.clientHeight;
                        const scrollTop = el.scrollTop;
                        const contentHeight = el.scrollHeight;
                        if (scrollTop + containerHeight >= contentHeight) {
                            binding.value();
                        }
                    });
                }
            }
        },
        methods: {
            loadMore() {
                if (this.isLoading) {
                    return;
                }
                this.isLoading = true;
                setTimeout(() => {
                    if (this.fetch().length != 0) this.isLoading = false;
                    this.newslist = [...this.newslist, ...this.fetch()];
                }, 1000);

            },
            fetch() {
                let word = [1, 2, 3, 4, 5, 6, 7, 8,'a','b','c','d','e','f'];
                return word;
            },
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello {
        height: 300px;
        overflow: auto;
    }

    .news {
        border: 1px solid #ccc;
    }

    h1,
    h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
